<template>
  <div style="width: 80%; margin: 0 auto;padding: 0 0 60px 0">
    <div class="basic-box" style="margin: 20px auto;">
      <div class="position-detail">
        <div style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
          <div style="display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start">
            <div class="position-detail-name text-primary">
              {{ positionDetail.name }}
            </div>
            <div class="position-detail-info text-info">
              <span class="position-detail-info-item"> {{ positionDetail.label }}</span>
            </div>
          </div>
          <div style="display: flex;flex-direction: column;align-items: center;justify-content: flex-start" class="text-warning position-detail-wage">
            {{ positionDetail.wage }}
          </div>
        </div>
        <div style="width: 99%;margin: 5px auto"><el-divider><span class="text-primary"></span></el-divider></div>
        <div class="position-detail-com">
          <el-image class="com-icon" :src="positionDetail.company.logo" />
          <div class="com-name">{{ positionDetail.company.name }}</div>
          <div class="com-detail text-info">{{ positionDetail.company.label }}</div>
        </div>
      </div>
    </div>
    <div class="basic-box">
      <div class="text-primary" style="font-weight: bold">招聘人信息 <i class="el-icon-watch"></i></div>
      <div class="hr">
        <div style="display: flex;flex-direction: row;align-items: center;height: 60px;justify-content: space-between;">
          <div style="display: flex;flex-direction: row;align-items: center;height: 60px">
            <el-image class="hr-avatar" :src="positionDetail.hr.avatar" />
            <div class="" style="display: flex;flex-direction: column">
              <div class="hr-name">{{ positionDetail.hr.name }}</div>
              <div class="text-info" style="display: flex;flex-direction: row;align-items: center;line-height: 20px">
                <div class="hr-detail">{{ positionDetail.hr.label }}</div>
              </div>
            </div>
          </div>
          <div>
            <el-button v-waves type="primary" icon="el-icon-chat-dot-round" circle plain @click="toChat(positionDetail.hr.id)"></el-button>
            <el-button v-waves type="warning" v-if="!isVisitor" :disabled="isSubmit" @click="submitResume">投递简历</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="basic-box">
      <div class="text-primary" style="font-weight: bold">岗位描述 <i class="el-icon-set-up"></i></div>
      <div class="text-info inner-html" v-html="positionDetail.description"></div>
    </div>
    <div class="basic-box">
      <div class="text-primary" style="font-weight: bold">工作地址 <i class="el-icon-map-location"></i></div>
      <div class="text-info" style="margin: 20px">
        {{ positionDetail.address }}
      </div>
      <div class="map" id="container"></div>
    </div>
    <div class="basic-box">
      <div class="text-primary" style="font-weight: bold">公司介绍 <i class="el-icon-data-analysis"></i></div>
      <div class="text-info inner-html" v-html="positionDetail.company.intro"></div>
    </div>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import VueAMap from 'vue-amap'
import waves from '@/directive/waves'
import { getPositionDetail, sendResume } from '@/api/position'
var map = null
var placeSearch = null

export default {
  name: 'PositionDetail',
  directives: { waves },
  data() {
    return {
      id: this.$route.query.id,
      isSubmit: false,
      isVisitor: false,
      aMap: {
        map: null,
        geocoder: null,
        marker: null,
        placeSearch: null
      },
      positionDetail: {
        hr: {
          name: ''
        },
        company: {
          name: ''
        }
      },
      positionDescription: '<div class="text">\n' +
        '                                    ▲岗位职责<br>1.监控订单入库/发货/客退进度，核实悬浮原因，跟进订单清理；<br>2.定期跟进库存数据，负责对接总部、商务核实发货异常等，规范现场操作；<br>3.负责运营周报，月度KPI的考核统计，库区奖励积分细则的制定、实施与考核跟进；<br>4.上级交代的其他任务。<br>▲岗位要求<br>1、年龄20～35岁，大专以上学历，懂电脑基本操作、表格基本操作；<br>2、逻辑清晰，沟通能力强，具备良好的团队合作精神；<br>3、工作细心、责任心强，抗压能力强。\n' +
        '                                </div>',
      comDescription: '<div class="text">\n' +
        '                                    唯品会（中国）有限公司（以下简称“唯品会”）全球总部设在广州，主要经营互联网在线销售品牌折扣商品，销售产品涵盖中高端服装、鞋子、箱包、家居用品、化妆品、奢侈品等。自2012年第4季度以来，唯品会已连续33个季度实现盈利，现已发展成为全球最大的特卖电商和全国净资产收益率排名第一\n' +
        '                                </div>'
    }
  },
  mounted() {
    this.initAMap()
    this.getDetail()
    for(const  i in this.$store.getters.roles){
      if(this.$store.getters.roles[0] === '游客') {
        this.isVisitor = true
      }
    }
  },
  methods: {
    getDetail() {
      console.log(this.id)
      getPositionDetail(this.id).then(
        res => {
          this.positionDetail = res.data.items
          console.log(res.data.items)
          this.getLocation(res.data.items.address)
        }
      )
    },
    initAMap() {
      // eslint-disable-next-line no-undef
      map = new AMap.Map('container', {
        resizable: true
      })
      placeSearch = new AMap.PlaceSearch({})
    },
    getLocation(address) {
      placeSearch.search(address, (status, result) => {
        var pois = result.poiList.pois
        for (let i = 0; i < pois.length; i++) {
          const poi = pois[i]
          const marker = []
          // eslint-disable-next-line no-undef
          marker[i] = new AMap.Marker({
            position: poi.location,
            title: poi.name
          })
          map.add(marker[i])
        }
        map.setFitView()
      })
    },
    toChat(id) {
      if(this.$store.getters.isLogin){
        window.open('/#/inform/p2p/' + (this.$store.getters.id < id ? this.$store.getters.id : id) + '_' + (this.$store.getters.id > id ? this.$store.getters.id : id) + '/' + new Date().getTime())
      } else {
        this.$message({
          message: '请先登录再进行此操作',
          type: 'info',
          duration: 500
        })
      }
    },
    submitResume() {
      sendResume(this.positionDetail.id).then(
        res => {
          if(res.status === 200) {
            this.$message({
              message: '添加成功',
              type: 'success',
              duration: 400
            })
          } else {
            this.isSubmit = true
          }
        }
      )
    }
  }
}
</script>

<style scoped lang="scss">
.basic-box {
  width: 100%;
  padding: 10px 20px;
}
.position-detail{
  margin: 10px 0;
  width: 100%;
  height: 170px;
  .position-detail-name{
    text-align: left;
    font-weight: bold;
    font-size: 25px;
  }
  .position-detail-info{
    margin-top: 20px;
  }
  .position-detail-wage{
    font-size: 25px;
    font-weight: bolder;
  }
  .position-detail-com{
    display: flex;
    flex-direction: row;
    align-items: center;
    .com-icon{
      width: 50px;
      height: 50px;
    }
    .com-name{
      font-weight: bold;
      margin: 0 10px;
    }
    .com-detail{
      margin-left: 5px;
    }
  }
}
.hr{
  margin: 10px 0;
  .hr-avatar{
    margin-right: 15px;
    width: 35px;
    height: 35px;
  }
  .hr-name{
    font-size: 22px;
  }
  .hr-detail{
    margin:5px 5px 0 0;
  }
}
.inner-html{
  line-height: 30px;
  padding: 10px;
}
.map{
  width: 80%;
  height: 400px;
  margin: 20px;
}
</style>
